<template>
  <div class="content_container">
      <van-search v-model="searchValue" placeholder="回车添加任务"  @keypress.enter="toDo" />
      <van-collapse v-model="activeName" accordion>
        <van-collapse-item title="未完成" name="1">
            <div class="to_do_container" 
            v-for="(item,index) in this.$store.state.toDoList"
            v-show="item.status == 0"
            :key="index">
            <input type="checkbox" @change="changeSta(index)"
            :checked="item.status !==0" />
            <div class="context_container">{{item.val}}</div>
            <van-button @click="cancel(index)">取消</van-button>
            </div>
        </van-collapse-item>
        <van-collapse-item title="已完成" name="2">
            <div class="to_do_container" 
            v-for="(item,index) in this.$store.state.toDoList"
            v-show="item.status == 1"
            :key="index">
            <input type="checkbox" @change="changeSta(index)"
            :checked="item.status ==1" />
            <div class="context_container">{{item.val}}</div>
            <!-- <van-button>取消</van-button> -->
            </div>
        </van-collapse-item>
        <van-collapse-item title="已取消" name="3">
            <div class="to_do_container" 
            v-for="(item,index) in this.$store.state.toDoList"
            v-show="item.status == 2"
            :key="index">
            <div class="context_container">{{item.val}}</div>
            <van-button @click="closeCancle(index)">恢复取消</van-button>
            </div>
        </van-collapse-item>
      </van-collapse>
  </div>
</template>

<script>
export default {
    data(){
        return{
            searchValue:"",
            activeName: '1',
        }
    },
    methods:{
        toDo(){
            var obj = {
                val:this.searchValue,
                status:0,
            };
            this.$store.commit("ADDTODO",obj)
        },
        changeSta(index,e){
            this.$store.commit("CHANGESYA",index)
        },
        cancel(index){
            this.$store.commit("CANCEL",index)
        },
        closeCancle(index){
            this.$store.commit("CLOSECANCLE",index)
        }
    }
}
</script>

<style scoped>
.content_container
{
    width: 100vw;
    height: 100%;
    background-color: orange;
}

.to_do_container
{
    width: 100%;
    height: 40px;
    /* border: 1px solid #000; */
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}

.to_do_container button
{
    width: 90px;
    height: 30px;
}

.context_container
{
    width: 70%;
    height: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
}
</style>